<template>
  <div class="spu">
    <!-- 三级分类部分 -->
    <Category @sendCategoryIds="getCategoryIds" @sendClearCategoryIds="clearCategoryIds"></Category>
    <!-- 展示部分 -->
    <el-card v-show="scene == 0" class="box-card">
      <el-button :disabled="!selectCategoryIds.category3Id" type="primary" icon="plus" @click="addSpu">添加SPU</el-button>
      <el-table :data="records" style="width: 100%;margin:15px 0;" border>
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="spuName" label="SPU名称"/>
        <el-table-column prop="description" label="SPU描述" />
        <el-table-column label="操作">
          <template #="{row,$index}">
            <el-button type="primary" size="small" icon="plus" title="添加sku" @click="addSku(row)"></el-button>
            <el-button type="success" size="small" icon="edit" title="编辑spu" @click="editSpu(row)"></el-button>
            <el-button type="info" size="small" icon="star" title="查看sku" @click="viewSku(row)"></el-button>
            <el-popconfirm :title="`确定要删除${row.spuName}吗?`" @confirm="delSpu(row)" confirm-button-text="确定" cancel-button-text="再想想">
              <template #reference>
                <el-button type="danger" size="small" icon="delete" title="删除spu"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background layout="prev, pager, next, jumper, ->, sizes, total" v-model:current-page="paginationDate.pageNo" v-model:page-size="paginationDate.pageSize" :total="paginationDate.total" :page-sizes="[3,5,7,9]" @size-change="sizeHandler" @current-change="currentHandler" />
    </el-card>
    <!-- 场景切换 -->
    <SpuForm ref="spuform" v-show="scene == 1" @changeScene="handlerScene"></SpuForm>
    <SkuForm ref="skuform" v-show="scene == 2" @changeScene="handlerScene"></SkuForm>
    <!-- dialog对话框，展示已有的sku数据 -->
    <el-dialog v-model="showDialog" title="查看SKU">
      <el-table border :data="skuInfo">
        <el-table-column label="SKU名字" prop="skuName"></el-table-column>
        <el-table-column label="SKU价格" prop="price"></el-table-column>
        <el-table-column label="SKU质量" prop="weight"></el-table-column>
        <el-table-column label="SKU图片">
          <template #="{row,$index}">
            <img :src="row.skuDefaultImg" alt="sku默认图片" style="width:80px;height:80px;">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore,引入子组件
import Category from "@/components/category/index.vue";
import SpuForm from "./spuForm.vue";
import SkuForm from "./skuForm.vue";
import { ElCard, ElButton, ElTable, ElTableColumn, ElPagination, ElDialog, ElPopconfirm, ElMessage } from "element-plus";
import {  } from '@element-plus/icons-vue';
//@ts-ignore,引入请求函数
import { reqProductSpu, reqSkuInfo, reqDeleteSpu } from "@/api/product/index.ts";
//@ts-ignore,引入类型
import type { HasSpuResponseData, Records, spuData, skuInfoData } from "@/api/product/type.ts";
import { ref, reactive} from "vue";

//子组件实例
let spuform = ref<any>();
let skuform = ref<any>();

//场景切换,默认0
let scene = ref<number>(0);
let showDialog = ref<boolean>(false);  //dialog对话框

//三级分类的ids
let selectCategoryIds = reactive({
  category1Id:0,
  category2Id:0,
  category3Id:0
})
//分页器数据
let paginationDate = reactive<any>({
  pageNo:1,
  pageSize:3,
  total:0
})
//存储已有spu数据的数组
let records:Records = ref<Records>([]);
//存储某spu下的sku数据
let skuInfo = ref<skuInfoData>([]);

//获取三级分类下的spu属性
const getProductSpu = async (page:number,pageSize:number,category3Id:number) => {
  let res:HasSpuResponseData = await reqProductSpu(page,pageSize,category3Id);
  if(res.code == 200){
    records.value = res.data.records;
    paginationDate.total = res.data.total;
    // console.log("三级分类下的spu属性api成功",res);
  }
}

//分页器的相关回调
const sizeHandler = () => {
  //发请求获取spu属性
  getProductSpu(paginationDate.pageNo,paginationDate.pageSize,selectCategoryIds.category3Id);
}
const currentHandler = () => {
  //发请求获取spu属性
  getProductSpu(paginationDate.pageNo,paginationDate.pageSize,selectCategoryIds.category3Id);
}

//添加spu功能按钮
const addSpu = () => {
  scene.value = 1;  //切换场景
  //调用子组件方法，在其组件方法中发请求
  spuform.value.addSpu(selectCategoryIds.category3Id);
}

//表格中的四个操作按钮
//添加sku按钮
const addSku = (row) => {
  //切换场景
  scene.value = 2;
  //调用子组件方法，以执行一些初始化的操作,传递各三级id数据,及spu的id,spu的tmId
  skuform.value.initData(selectCategoryIds,row.id,row.tmId);
}
//修改spu按钮
const editSpu = (row:spuData) => { 
  scene.value = 1;  //切换场景
  //调用子组件的方法，再其组件中发请求
  spuform.value.getSpuData(row);
}
//查看sku按钮
const viewSku = async (row) => {
  let res:skuInfoData = await reqSkuInfo(row.id);
  if(res.code == 200){
    skuInfo.value = res.data;
    // console.log("获取sku数据api成功",res);
    //打开dialog对话框
    showDialog.value = true;
  }
}
//删除spu按钮
const delSpu = async (row) => {
  let res:any = await reqDeleteSpu(row.id);
  if(res.code == 200){
    ElMessage({type:"success",message:"SPU删除成功"});
    // console.log("spu删除api成功",res);
    //重发请求更新spu列表数据
    getProductSpu(paginationDate.pageNo,paginationDate.pageSize,selectCategoryIds.category3Id);
  }
}



//自定义事件部分
//从子组件category获取选的的三级分类对应的id
const getCategoryIds = (categoryIds) => {
  selectCategoryIds = categoryIds;  //存储一下
  //发请求获取spu属性
  getProductSpu(paginationDate.pageNo,paginationDate.pageSize,selectCategoryIds.category3Id);
}
//子组件category的一二级分类id改变的自定义事件
const clearCategoryIds = () => {
  // console.log("ids值变了");
}

//子组件SpuForm及SkuForm的changeScene事件回调
const handlerScene = (sceneNum:number,str) => {
  scene.value = sceneNum;
  //修改或者添加了SPU,重写发请求获取最新数据
  //注意从spuForm组件切回来要发请求，congskuForm组件切回来不用发请求
  if(str && str == 'noRequest'){
    return ;
  }
  getProductSpu(paginationDate.pageNo,paginationDate.pageSize,selectCategoryIds.category3Id);
}
</script>

<script lang="ts">
export default {
  name:"Spu"
}
</script>

<style>

</style>